<template>
    <div class="mainpage">
            <van-nav-bar
                title="中医健康"
                fixed=true
                />
        <div class="contentbox">
            <div class="imgbox" >
                <van-swipe :autoplay="3000">
                    <van-swipe-item v-for="(image, index) in images" :key="index">
                        <img v-lazy="image" height="200px" width="100%"/>
                    </van-swipe-item>
                </van-swipe>
            </div>
            <br />
            <van-row>
                <div class="mycard2">
                     <van-col offset="1" span="22">{{ date | formatDate }}</van-col>
                </div>
                <br />
                <van-col offset="1" span="15">
                    <van-icon name="fire-o" />
                    热门中药
                    </van-col>
                <router-link to="/mainpagemedicine">
                    <van-col offset="5" span="3" >
                        
                        <van-tag plain type="primary">更多</van-tag>
                    </van-col>
                </router-link>
            </van-row>
            <div class="objbox1">
                <van-grid :border="false" :column-num="4">
                    <van-grid-item v-for="data2 in datas2" :key="data2.id" >
                        <router-link :to="'/medicinedetail/'+data2.id">
                        <div v-if="data2.id<9" class="columnbox">
                            <van-image
                                round
                                width="2rem"
                                height="2rem"
                                :src="data2.imgurl"
                            />
                            {{data2.name}}
                        </div>
                        </router-link>
                    </van-grid-item> 
                </van-grid>
            </div>
            <van-tabs v-model="active" title-active-color="#39a9ed" color="#39a9ed" >
                <van-tab title="中药知识">
                    <div>
                        <van-cell v-for="data in datas" :key="data.id" >
                        <router-link :to="'/knowledgedetail/'+data.id">
                        <div class="mycard">
                        <div class="mycard_title">
                            {{data.title}}
                        </div>
                        <div class="mycard_date">
                            {{data.date}}
                        </div>
                        <div class="mycard_imgbox">
                            <van-image
                            width="90"
                            height="90"
                            :src="data.imgurl"
                            class="imgbox"
                            />
                        </div>
                        </div>
                        </router-link>
                </van-cell>
            </div>
                </van-tab>
                <van-tab title="论坛">
                    <div class="commentbox" v-for="data3 in datas3" :key="data3.id">
                        <cards :data="data3"/>
                    </div>
                </van-tab>
            </van-tabs>

        </div>
        <bottomBar />
    </div>
</template>

<script>
import bottomBar from '../components/bottomBar.vue'
import cards from '../components/cards.vue' 

var padDate = function(value){
                return value < 10 ? '0'+ value :value;
            };

    export default {
        data(){
            return{
                datas:[],
                datas2:[],
                datas3:[],
                images: [
                    'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2708788078,2569650958&fm=26&gp=0.jpg',
                    'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3573382944,2352961818&fm=26&gp=0.jpg',
                    'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171218%2F2a6f286c3b7742e596a6d3750270165a.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626749849&t=84a1a1fdfc32bf5dad6d21eec921e1fc',
                    
                ],
                active:0,
                date:new Date()
                
            }
        },
        components: {
            bottomBar,
            cards
        },
        filters:{
                        formatDate:function(value){
                            var date=new Date(value);
                            var year= date.getFullYear();
                            var month=padDate(date.getMonth()+1);
                            var day=padDate(date.getDate());
                            var hours=padDate(date.getHours());
                            var minutes=padDate(date.getMinutes());
                            var seconds=padDate(date.getSeconds());
                            var weeks=['日','一','二','三','四','五','六'];
                            var week='星期'+weeks[date.getDay()];
                            var time;
                            if(hours<12)
                            time='早上好'
                            else if(hours>12 &&hours<18)
                            time='下午好'
                            else
                            time='晚上好'
                            return '现在时间是'+year +'年'+ month+'月'+day+'日 '+week+' '+hours+':'+minutes+':'+seconds;
                        },
        },
        methods:{
            welcometip(){
                this.$toast('欢迎回来');
            },
            getdata(){
                this.$axios.get("http://localhost:3000/knowledge")
                .then(res =>{
                    // console.log(res.data)
                    this.datas=res.data
                    console.log(this.datas)
                    console.log("aaaa")
                })
            },
            getdata2(){
                this.$axios.get("http://localhost:3000/mainpagemedicine")
                .then(res =>{
                    // console.log(res.data)
                    this.datas2=res.data
                    console.log(this.datas2)
                })
            },
            getdata3(){
                this.$axios.get("http://localhost:3000/comment")
                .then(res =>{
                    // console.log(res.data)
                    this.datas3=res.data
                    console.log(this.datas3)
                })
            }

            
        },
        created:function(){
            console.log("created")
        },
        mounted:function(){
            console.log("mounted")
            this.welcometip();
            // this.$nextTick(() => {
            //     this.stickyEvent();
            // });
            this.getdata();
            this.getdata2();
            this.getdata3();
            var _this=this;
                this.timer=setInterval(function(){
                    _this.date=new Date();
                },1000);
        },
        beforeDestory:function(){
                        if(this.timer)
                        {
                            clearInterval(this.timer);
                        }
                    }
        
    };
</script>

<style>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    /* background-color: #39a9ed; */
  }
  .contentbox{
      /* width: 90%;
      position: relative; left: 5%; */
      font-size:11pt;
      /* background-color:#F2F8FA ; */
  }
  .imgbox{
      height: 200px;
  }
  .mycard2{
      border: 1px solid;
      height: 200px;
      border-radius: 5px;
      /* background-color: #D9ECFF; */
      width: 90%;
      margin-left: 5%;
      opacity: 90%;
      background-image: url("../assets/background.png");
      background-size: 100% 100%;
      font-weight:bold
  }
  .mycard{
      position:relative;
      height: 100px;
      background-color: #fff;
      border-radius: 5px;
      border: 1px solid;
      border-color:#DCDEE0
  }
  .mycard_imgbox{
      position: absolute;
      margin-top:5px;
      margin-left:5px;
  }
  .mycard_title{
      position: absolute;
      margin-top:10px;
      margin-left:120px;
      font-size: 18px;
      color: #000;
  }
  .mycard_date{
      position: absolute;
      margin-top:75px;
      margin-left:120px;
      font-size: 13px;
      color: #969799;
  }
  .columnbox{
      /* background-color:#409EFF; */
      background:transparent;
      text-align:center;
      color: #000;
  }
</style>
